<template>
  <div class="baseInfo">
    <card title="区域属性">
      <div class="wather">
        <div class="fristRow">今日天气</div>
        <div class="temperature">
          <div>
            <span>18</span>℃
            <div class="info">
              多云
              <div>西风3级&nbsp;湿度60%</div>
            </div>
          </div>

          <div class="image">
            <img src="@/assets/image/waterMap/1.png" alt="" />
          </div>
        </div>
      </div>
    </card>
    <card title="雨水情况图(近半年)">
      <div class="castomEcharts">
        <myEcharts :option="echartsOption" :delayTime="1500"></myEcharts>
      </div>
    </card>
  </div>
</template>

<script>
import card from "@/components/panel/card.vue";
import myEcharts from "@/components/myEcharts/index.vue";
export default {
  components: { card, myEcharts },
  data() {
    return {
      echartsOption: {},
    };
  },
  mounted() {
    this.initEharts();
  },
  methods: {
    initEharts() {
      var attaData1 = [62, 52, 34, 61, 15, 25, 50, 60, 90, 100];
      var attaData2 = [162, 152, 134, 161, 115, 60, 90, 10, 30, 125];
      this.echartsOption = {
        tooltip: {
          trigger: "axis",
          borderColor: "#62FFFF",
          // formatter: " {b}：  {c}mm",
          axisPointer: {
            type: "shadow",
          },
        },
        // 图例
        legend: {
          show: true,
          icon: "roundRect",
          top: 10,
          left: 20,
          itemWidth: 8,
          itemHeight: 8,
          textStyle: {
            fontWeight: "normal",
            fontSize: 14,
            color: "#162440",
          },
        },
        grid: {
          show: false,
          top: 50,
          bottom: 30,
          left: 20,
          right: 20,
          containLabel: true,
        },
        xAxis: {
          show: true,
          type: "value",
          position: "top",
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(0, 20, 45, 0.05)",
            },
          },
          axisLabel: {
            textStyle: {
              color: "rgba(0, 0, 0, 0.79)",
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          // 区域分隔线
          splitLine: {
            show: true,
            interval: "auto",
            lineStyle: {
              width: 1,
              color: "rgba(0, 20, 45, 0.1)",
              type: [5, 10],
              dashOffset: 5,
            },
          },
        },
        yAxis: {
          data: ["12月", "11月", "10月", "09月", "08月", "07月", "06月"],
          axisLine: {
            lineStyle: {
              color: "rgba(0, 20, 45, 0.15)",
            },
          },
          axisLabel: {
            textStyle: {
              color: "rgba(0, 0, 0, 0.79)",
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            name: "今年降雨",
            type: "bar",
            barWidth: 12,
            zlevel: 2,
            itemStyle: {
              color: "#406AFA",
              opacity: 0.8,
            },
            data: attaData1,
          },
          {
            name: "去年降雨",
            type: "bar",
            barWidth: 12,
            zlevel: 2,
            itemStyle: {
              color: "#00E6F4",
            },
            data: attaData2,
          },
        ],
      };

      // this.echartsOption = {
      //   textStyle: {
      //     fontFamily: "Microsoft YaHei",
      //     fontStyle: "normal",
      //     fontWeight: "normal",
      //     fontSize: 14,
      //     color: "#162440",
      //   },
      //   color: ["#FFD87B", "#4C96FF", "#17CEBD", "#FF6565"],
      //   // 图例
      //   legend: {
      //     show: true,
      //     icon: "roundRect",
      //     itemWidth: 16,
      //     itemHeight: 8,
      //     textStyle: {
      //       fontWeight: "normal",
      //       fontSize: 14,
      //       color: "#162440",
      //     },
      //   },
      //   // 提示
      //   tooltip: {
      //     show: true,
      //     // trigger: 'item',
      //     textStyle: {
      //       fontSize: 14,
      //       color: "#162440",
      //     },
      //     //   formatter: (params) => {
      //     //     // console.log(params);
      //     //     const { marker, seriesName, name, data } = params;
      //     //     const { value, unit } = data;

      //     //     return (
      //     //       `${marker} ${seriesName}年<br>` + `${name}: ${value} ${unit}`
      //     //     );
      //     //   },
      //   },
      //   grid: {
      //     show: false,
      //     top: 60,
      //     bottom: 60,
      //     left: 10,
      //     right: 60,
      //     containLabel: true,
      //   },
      //   yAxis: {
      //     type: "category",
      //     name: "品牌",
      //     nameGap: 15,
      //     nameTextStyle: {
      //       fontWeight: "normal",
      //       fontSize: 14,
      //       color: "#162440",
      //     },
      //     inverse: true,
      //     nameLocation: "start",
      //     // 坐标轴
      //     axisLine: {
      //       show: true,
      //       lineStyle: {
      //         width: 1,
      //         color: "#D6D9DF",
      //         type: [5, 10],
      //         dashOffset: 5,
      //       },
      //     },
      //     // 刻度
      //     axisTick: {
      //       show: true,
      //       interval: "auto",
      //       inside: false,
      //       length: 5,
      //       lineStyle: {
      //         width: 1,
      //         color: "#D6D9DF",
      //       },
      //     },
      //     axisLabel: {
      //       show: true,
      //       interval: "auto",
      //       inside: false,
      //       rotate: 0,
      //       margin: 8,
      //       fontWeight: "normal",
      //       fontSize: 14,
      //       color: "#162440",
      //       formatter: "{value}",
      //     },
      //     // 区域分隔线
      //     splitLine: {
      //       show: false,
      //       interval: "auto",
      //       lineStyle: {
      //         width: 1,
      //         color: ["#D6D9DF", "#D6D9DF"],
      //         type: [5, 10],
      //         dashOffset: 5,
      //       },
      //     },
      //   },
      //   xAxis: {
      //     type: "value",
      //     nameGap: 15,
      //     nameTextStyle: {
      //       fontWeight: "normal",
      //       fontSize: 14,
      //       color: "#162440",
      //     },
      //     // 坐标轴
      //     axisLine: {
      //       show: true,
      //       lineStyle: {
      //         width: 1,
      //         color: "#D6D9DF",
      //         type: [5, 10],
      //         dashOffset: 5,
      //       },
      //     },
      //     // 刻度
      //     axisTick: {
      //       show: true,
      //       interval: "auto",
      //       inside: false,
      //       length: 5,
      //       lineStyle: {
      //         width: 1,
      //         color: "#D6D9DF",
      //       },
      //     },
      //     axisLabel: {
      //       show: true,
      //       interval: "auto",
      //       inside: false,
      //       rotate: 0,
      //       margin: 8,
      //       fontWeight: "normal",
      //       fontSize: 14,
      //       color: "#162440",
      //       formatter: "{value}",
      //     },
      //     // 区域分隔线
      //     splitLine: {
      //       show: true,
      //       interval: "auto",
      //       lineStyle: {
      //         width: 1,
      //         color: ["#D6D9DF", "#D6D9DF"],
      //         type: [5, 10],
      //         dashOffset: 5,
      //       },
      //     },
      //   },
      //   dataset: [
      //     {
      //       source: [
      //         { name: "耐克", value: "200", unit: "元", year: "2020" },
      //         { name: "阿迪", value: "100", unit: "元", year: "2020" },
      //         { name: "锐步", value: "220", unit: "元", year: "2020" },
      //         { name: "彪马", value: "180", unit: "元", year: "2020" },
      //         { name: "斐乐", value: "150", unit: "元", year: "2020" },
      //         { name: "卡帕", value: "200", unit: "元", year: "2020" },
      //         { name: "茵宝", value: "240", unit: "元", year: "2020" },
      //         { name: "乐途", value: "240", unit: "元", year: "2020" },
      //         { name: "耐克", value: "220", unit: "元", year: "2021" },
      //         { name: "阿迪", value: "140", unit: "元", year: "2021" },
      //         { name: "锐步", value: "200", unit: "元", year: "2021" },
      //         { name: "彪马", value: "140", unit: "元", year: "2021" },
      //         { name: "斐乐", value: "150", unit: "元", year: "2021" },
      //         { name: "卡帕", value: "130", unit: "元", year: "2021" },
      //         { name: "茵宝", value: "200", unit: "元", year: "2021" },
      //         { name: "乐途", value: "210", unit: "元", year: "2021" },
      //       ],
      //     },
      //     {
      //       transform: {
      //         type: "filter",
      //         config: { dimension: "year", value: "2020" },
      //       },
      //     },
      //     {
      //       transform: {
      //         type: "filter",
      //         config: { dimension: "year", value: "2021" },
      //       },
      //     },
      //   ],
      //   series: [
      //     {
      //       type: "bar",
      //       name: "2020",
      //       barWidth: 20,
      //       label: {
      //         show: true,
      //         position: "inside",
      //         distance: 5,
      //         offset: [0, 2],
      //         fontWeight: 400,
      //         fontSize: 14,
      //         color: "#162440",
      //         // formatter: "{a}年: {@value} {unit|{@unit}}",
      //         rich: {
      //           unit: {
      //             fontWeight: 400,
      //             fontSize: 12,
      //           },
      //         },
      //       },
      //       itemStyle: {
      //         borderRadius: [0, 10, 10, 0],
      //         color: "#4C96FF",
      //       },
      //       emphasis: {
      //         focus: "series",
      //       },
      //       datasetIndex: 1,
      //       seriesLayoutBy: "column",
      //       encode: { y: "name", x: "value" },
      //     },
      //     {
      //       type: "bar",
      //       name: "2021",
      //       barWidth: 20,
      //       emphasis: {
      //         focus: "series",
      //       },
      //       datasetIndex: 2,
      //       seriesLayoutBy: "column",
      //       encode: { y: "name", x: "value" },
      //     },
      //   ],
      // };
    },
  },
};
</script>
<style lang="scss" scoped>
.baseInfo {
  width: 100%;
  // height: 100%;
  // padding: 20px;
  .wather {
    padding: 20px;
    text-align: left;
    box-sizing: border-box;
    .fristRow {
      line-height: 40px;
    }
    .temperature {
      display: flex;
      justify-content: space-between;
      :nth-child(1) {
        display: flex;
        align-items: flex-start;
        span {
          font-size: 37px;
          font-weight: 600;
          color: #00142d;
          // line-height: 49px;
        }
      }
      .info {
        margin-left: 20px;
        font-weight: 600;
        line-height: 24px;
        > div {
          font-size: 12px;
          font-weight: 400;
          color: #00142d7a;
        }
      }
    }
  }
  .castomEcharts {
    height: calc(100vh - 325px);
    width: 100%;
  }
}
</style>
